<template>
  <div id="slideindex">
    <div class="group">
      <div class="group-left">
        <div class="g-l-item">
          <p>累计预约次数</p>
          <h2 v-if="totalCounts != null">{{totalCounts.appoTotal}}</h2>
          <h2 v-else>0</h2>
        </div>
        <div class="g-l-item">
          <p>实际赴约次数</p>
          <h2 v-if="totalCounts != null">{{totalCounts.keepAppoCount}}</h2>
          <h2 v-else>0</h2>
        </div>
      </div>
      <div class="group-right">
        <div class="group2">
          <p class="publicTitle">昨日预约</p>
          <p class="pubNumber" v-if="yesterdayCount != null">{{yesterdayCount.appoTotal}}</p>
          <p class="pubNumber" v-else>0</p>
          <div class="prossGroup">
            <span>赴约率</span>
            <div class="progss">
              <el-progress
                v-if="yesterdayCount != null"
                :percentage="yesterdayCount.keepAppoPer"
                :stroke-width="6"
              ></el-progress>
              <el-progress v-else :percentage="0" :stroke-width="6"></el-progress>
            </div>
          </div>
        </div>
        <div class="group3">
          <p class="publicTitle">今日预约</p>
          <p class="pubNumber" v-if="todayCount != null">{{todayCount.appoTotal}}</p>
          <p class="pubNumber" v-else>0</p>
          <div class="prossGroup">
            <span>赴约率</span>
            <div class="progss">
              <el-progress
                v-if="todayCount != null"
                :percentage="todayCount.keepAppoPer"
                :stroke-width="6"
              ></el-progress>
              <el-progress v-else :percentage="0" :stroke-width="6"></el-progress>
            </div>
          </div>
        </div>
        <div class="group4">
          <p class="publicTitle">本周预约</p>
          <p class="pubNumber" v-if="weekCount != null">{{weekCount.appoTotal}}</p>
          <p class="pubNumber" v-else>0</p>
          <div class="huaibi">
            <p class="left" v-if="weekCount != null">
              <span>环比</span>
              <img v-if="weekCount.loopPer >= 0 " src="../assets/img/index-up.png">
              <img v-else src="../assets/img/index-down.png">
              <span>{{weekChain}}%</span>
            </p>
            <p class="left" v-else>
              <span>环比</span>
              <img src="../assets/img/index-up.png">
              <span>0%</span>
            </p>
            <p></p>
          </div>
        </div>
        <div class="group5">
          <p class="publicTitle">本月预约</p>
          <p class="pubNumber" v-if="monthCount != null">{{monthCount.appoTotal}}</p>
          <p class="pubNumber" v-else>0</p>
          <div class="huaibi">
            <p class="left" v-if="monthCount !=null">
              <span>环比</span>
              <img v-if="monthCount.loopPer >= 0 " src="../assets/img/index-up.png">
              <img v-else src="../assets/img/index-down.png">
              <span>{{monthChain}}%</span>
            </p>
            <p class="left" v-else>
              <span>环比</span>
              <img src="../assets/img/index-up.png">
              <span>0%</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="charts">
      <div id="leftCharts">
        <v-chart :id="'pieChart1'" :data="option1" style="height:100%;"></v-chart>
      </div>
      <div id="rightCharts">
        <v-chart :id="'lineChart1'" :data="option2" style="height:100%;"></v-chart>
      </div>
    </div>
  </div>
</template>
<script>
import vChart from "./view/chart.vue";
import { getHomeData } from "../api/getData";
import { isArray } from 'util';
export default {
  name: "slideindex",
  components: { vChart },
  data: function() {
    return {
      busTypeTotalList: [], //业务办理占比
      totalCounts: {
        keepAppoCount: 0, //累计赴约次数
        appoTotal: 0 //累计预约次数
      },
      yesterdayCount: {
        appoTotal: 0, //昨日预约数
        keepAppoCount: 0, //昨日赴约人数
        keepAppoPer: 0 //昨日赴约率
      },
      todayCount: {
        appoTotal: 0, //今日预约数
        keepAppoCount: 0, //今日赴约人数
        keepAppoPer: 0 //今日赴约率
      },
      weekCount: {
        //本周预约
        appoTotal: 0,
        keepAppoCount: 0,
        loopPer: 0
      },
      monthCount: {
        //本月预约
        appoTotal: 0,
        keepAppoCount: 0,
        loopPer: 0
      },
      yearDataList: [], //年度业务办理量
      weekChain: "",
      monthChain: "",
      option1: {
        title: {
          text: "业务预约占比",
          textStyle: {
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          x: "center",
          y: "bottom",
          formatter: function(params) {
            // console.log(params)
            if (params.indexOf("\n") == -1) {
              return params;
            } else {
              return (
                "{white|" +
                params.split("\n")[0] +
                "}\n" +
                params.split("\n")[1]
              );
            }
          }
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "44%",
            style: {
              text: " ",
              fill: "#000",
              width: 30,
              height: 30,
              fontSize: 30
            }
          },
          {
            type: "text",
            left: "center",
            top: "54%",
            style: {
              text: "总业务量",
              fill: "#000",
              width: 30,
              height: 30,
              fontSize: 16
            }
          }
        ],
        color: [
          "#565ADE",
          "#328EF9",
          "#3ED0B9",
          "#9C6DE2",
          "#FBB730",
          "#FB8830"
        ],
        series: [
          {
            name: "业务预约占比",
            type: "pie",
            radius: ["35%", "50%"],
            label: {
              normal: {
                show: "true",
                formatter: "{c|{c}}\r\n{per|{d}%}",
                borderWidth: 20,
                padding: [0, -5],
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 1
                  },
                  c: { fontSize: 18, fontWeight: "bold" },
                  per: { color: "#333", fontSize: 13 }
                },
                textStyle: {
                  fontSize: 20,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              normal: {
                length: 15,
                length2: 30
              }
            },
            data: []
          }
        ]
      },
      option2: {
        title: {
          text: "2018业务预约次数",
          textStyle: {
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          padding: [0, 10],
          itemGap: 30
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            nameGap: 30,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            }
          }
        ],
        color: ["#328EF9", "#04cdad", "#f2ad68","#565ADE",
          "#328EF9",
          "#3ED0B9",
          "#9C6DE2",
          "#FBB730",
          "#FB8830"],
        series: [
          
        ]
      }
    };
  },
  created() {
    this.getData();
  }, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {}, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
    getData() {
      let businessTypeName = [];
      let seriesData1 = [];
      let seriesData2 = [];
      getHomeData({})
        .then(res => {
          console.log(res.data.data, "首页");
          if (res.data.code === 0) {
            this.busTypeTotalList = res.data.data.busTypeTotalList;
            this.yearDataList = res.data.data.busTypeMonthList;
            this.totalCounts = res.data.data.appoTotal;
            this.yesterdayCount = res.data.data.yesterdayCount;
            this.todayCount = res.data.data.todayCount;
            this.weekCount = res.data.data.weekCount;
						this.monthCount = res.data.data.monthCount;
						
						//业务预约占比
					this.option1.graphic[0].style.text = res.data.data.busTypeTotalListCount
					let dataList = [];
					res.data.data.busTypeTotalList.forEach(item=>{
							dataList.push({"value":item.appoCount,"name":item.businessTypeName})
					})
					this.option1.series[0].data = dataList;

					//业务预约次数
					let numMouth = [];
					res.data.data.busTypeMonthList.dataList[0].date.forEach((item,x) =>{
						
						let arr = [];
						res.data.data.busTypeMonthList.dataList.forEach(item =>{
								arr.push(item.date[x].bTotal)
						})
							numMouth.push({
								name: item.bName,
								type: "line",
								data: arr
							})
          })
          this.option2.series = numMouth
          this.option2.title.text = res.data.data.busTypeMonthList.dataList[0].data.split('-')[0] +'业务预约次数'
            // 本周、本月预约环比增减 负数转为整数
            if (res.data.data.weekCount != null) {
              this.weekChain = Math.abs(res.data.data.weekCount.loopPer);
            }
            if (res.data.data.monthCount != null) {
              this.monthChain = Math.abs(res.data.data.monthCount.loopPer);
            }
            res.data.data.busTypeTotalList.forEach((item, index) => {
              businessTypeName.push(item.businessTypeName);
              seriesData1.push({
                value: item.appoCount,
                name: item.businessTypeName
              });
            });


          } else {
            this.busTypeTotalList = [];
            this.yearDataList = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  } // 函数
};
</script>
<style lang='scss'>
#slideindex {
  .group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .group-left {
      width: 34%;
      height: 216px;
      box-shadow: #ccc 4px 4px 10px;
      background: linear-gradient(to right, #00cdac, #56d5c4);
      color: #fff;
      border-radius: 5px;
      .g-l-item {
        padding: 30px 20px 0;
        h2 {
          font-size: 30px;
          margin-top: 10px;
        }
      }
    }
    .group-right {
      width: 64%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .group2,
      .group3,
      .group4,
      .group5 {
        width: 49%;
        box-shadow: #ccc 4px 4px 10px;
        box-sizing: border-box;
        height: 100px;
        padding: 12px 16px;
        color: #fff;
        border-radius: 5px;
        .prossGroup {
          justify-content: space-between;
          display: flex;
          .progss {
            width: 80%;
          }
          .el-progress-bar {
            margin-right: 0;
            padding-right: 0;
            width: 80%;
          }
          .el-progress-bar__outer {
            /* width: 100%; */
            background-color: #f7ab60;
          }
          .el-progress-bar__inner {
            background-color: #fff;
          }
          .el-progress__text {
            color: #fff;
            font-size: 12px;
          }
          span {
            font-size: 12px;
            color: #fff;
            margin-top: 3px;
          }
        }
        .huaibi {
          display: flex;
          justify-content: space-between;
          color: #fff;
          font-size: 12px;
          img {
            margin: 0 10px;
          }
        }
        .pubNumber {
          text-align: left;
          /* margin-top: 4px; */
          padding: 4px 0;
          color: #fff;
          font-size: 30px;
          font-weight: bold;
        }
        &.group2 {
          background: url(../assets/img/index-1.png) 0 0 no-repeat;
          background-size: 100% 100%;
          margin-bottom: 14px;
        }
        &.group3 {
          background: url(../assets/img/index-2.png) 0 0 no-repeat;
          background-size: 100% 100%;
          margin-bottom: 14px;
          .el-progress-bar__outer {
            background-color: #65c1ff;
          }
        }
        &.group4 {
          background: url(../assets/img/index-3.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        &.group5 {
          background: url(../assets/img/index-4.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .charts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    #leftCharts {
      width: 34%;
      height: 500px;
      padding: 20px;
      background-color: #fff;
      box-shadow: #ccc 4px 4px 10px;
    }
    #rightCharts {
      width: 64%;
      height: 500px;
      padding: 20px;
      background-color: #fff;
      box-sizing: border-box;
      box-shadow: #ccc 4px 4px 10px;
    }
  }
}
</style>
